"use client";

import {LuckyWheelPage} from "@/app/pages/lucky/lucky-wheel-page";
import {LuckyGridPage} from "@/app/pages/lucky/lucky-grid-page";
import dynamic from "next/dynamic";
import {useState} from "react";

const StrategyArmoryButton = dynamic(async () => (await import("./components/StrategyArmory")).StrategyArmory)
const StrategyRuleWeightButton = dynamic(async () => (await import("./components/StrategyRuleWeight")).StrategyRuleWeight)
const MemberCardButton = dynamic(async () => (await import("./components/MemberCard")).MemberCard)
const SkuProductButton = dynamic(async () => (await import("./components/SkuProduct")).SkuProduct)

export default function Home() {
    const [refresh, setRefresh] = useState(0);
    const [showProjectLinks, setShowProjectLinks] = useState(true); // 新增状态控制显示隐藏

    const handleRefresh = () => {
        setRefresh(refresh + 1);
    };

    return (
        <div
            className="flex flex-col items-center justify-center min-h-screen bg-[#e7305e]"
            style={{ backgroundImage: "url('/background.svg')" }}
        >
            {/* 头部文案 */}
            <header
                className="text-7xl font-bold text-center text-gray-800 my-8"
                style={{ color: "white" }}
            >
                大营销平台 - 抽奖展示
            </header>

            {/* 会员卡 */}
            <MemberCardButton allRefresh={refresh} />

            {/* 装配抽奖 */}
            <StrategyArmoryButton />

            {/* 商品 */}
            <SkuProductButton handleRefresh={handleRefresh} />

            {/* 中间的两个div元素 */}
            <div className="flex flex-col md:flex-row gap-4 mb-8">
                <div className="w-full md:w-1/2 p-6 bg-white shadow-lg rounded-lg">
                    <div className="text-gray-700">
                        <LuckyWheelPage handleRefresh={handleRefresh} />
                    </div>
                </div>
                <div className="w-full md:w-1/2 p-6 bg-white shadow-lg rounded-lg">
                    <div className="text-gray-700">
                        <LuckyGridPage handleRefresh={handleRefresh} />
                    </div>
                </div>
            </div>

            <div className="flex items-center space-x-4">
                <StrategyRuleWeightButton refresh={refresh} />
            </div>

            {/* 底部文案和切换按钮 */}
            <footer
                className="fixed right-4 cursor-pointer"
                style={{
                    top: "4rem",
                    color: "#ffffff",
                    fontSize: "1.125rem",
                    fontWeight: "600",
                    userSelect: "none",
                    textShadow: "0 0 8px rgba(0,0,0,0.4)",
                    whiteSpace: "pre-line",
                    lineHeight: "1.5",
                }}
            >
                <button
                    onClick={() => setShowProjectLinks(!showProjectLinks)}
                    className="mb-2 p-1 bg-blue-600 hover:bg-blue-700 rounded text-white text-sm"
                    style={{ userSelect: "none" }}
                >
                    {showProjectLinks ? "隐藏项目地址" : "显示项目地址"}
                </button>

                {showProjectLinks && (
                    <>
                        <div>
                            项目后端地址：{" "}
                            <a
                                href="https://gitee.com/keke-yi/big-market"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="underline hover:text-blue-300"
                                onClick={(e) => e.stopPropagation()}
                            >
                                https://gitee.com/keke-yi/big-market
                            </a>
                        </div>
                        <div>
                            项目前端地址：{" "}
                            <a
                                href="https://gitee.com/keke-yi/big-market-front.git"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="underline hover:text-blue-300"
                                onClick={(e) => e.stopPropagation()}
                            >
                                https://gitee.com/keke-yi/big-market-front.git
                            </a>
                        </div>
                    </>
                )}
            </footer>
        </div>
    );
}
